<template>
    <header class="head">
        <img src="../assets/images/wsq-ui-logo.png" />
        <div class="title">
            <span>WSQ UI</span>
            <span>(适用于vue3)</span>
        </div>
    </header>
</template>

<style scoped>
    .head{
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        line-height: 90px;
        background-color: rgb(0, 25, 56);
        color: #ffffff;
    }
    .head::after{
        content: '';
        display: block;
        clear: both;
    }
    img{
        float: left;
        width: 70px;
        height: 70px;
        margin: 15px;
    }
    .title{
        float:left
    }
    .title span:first-child{
        font-size: 40px;
        font-weight: 700;
    }
    .title span:last-child{
        margin-left: 15px;
        font-size: 20px;
    }
</style>